﻿@page "/Login"
@using System.Net.Http.Headers
@using iOSClub.App.Share
@using Microsoft.AspNetCore.Components.Authorization
@inject NavigationManager Nav
@inject HttpClient HttpClient
@inject AuthenticationStateProvider Authentication
@inject MessageService Message

<PageTitle>登录</PageTitle>

<GridRow Type="flex" Justify="center" Style="height: 80vh;">
    <GridCol Xs="24" Sm="24" Md="24" Lg="24" Xl="12" Xxl="12">
        <Card Class="login-form" Bordered="false">
            <Title Level="2" Style="text-align: center">登录</Title>
            <Form Model="Model"
                  OnFinish="LoginForm">
                <FormItem Class="item">
                    <div class="input-box">
                        <input @bind="@context.Name" required=""/>
                        <label>姓名</label>
                    </div>
                </FormItem>
                <FormItem Class="item">
                    <div class="input-box">
                        <input @bind="@context.Id" required=""/>
                        <label>学号</label>
                    </div>
                </FormItem>
                <FormItem Class="item" Style="text-align: center">
                    <Button Style="border-radius: 4px;" Type="@ButtonType.Primary" HtmlType="submit">提交</Button>
                </FormItem>
                <FormItem Class="item">
                    <Paragraph class="Submit" Style="text-align: center">
                        没有账号？去
                        <NavLink href="https://www.xauat.site/Signup" Match="NavLinkMatch.All">注册</NavLink>
                        一个
                    </Paragraph>
                </FormItem>
            </Form>
        </Card>
    </GridCol>
</GridRow>


@code {

    private LoginModel Model { get; } = new();
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            return;
        }
        var authState = await Authentication.GetAuthenticationStateAsync();
        var user = authState.User;

        if (user.Identity is not null && user.Identity.IsAuthenticated)
        {
            await Message.Success("您已登录");
            Nav.NavigateTo("/",true);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    private async Task LoginForm()
    {
        var response = await HttpClient.PostAsJsonAsync("http://localhost:5103/api/Member/Login", Model);
        if (response.IsSuccessStatusCode)
        {
            var jwt = await response.Content.ReadAsStringAsync();
            HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", jwt);
            response = await HttpClient.GetAsync("http://localhost:5103/api/Member/GetData");
            var auth = (JwtProvider)Authentication;
            var json = await response.Content.ReadAsStringAsync();
            await auth.UpdateAuthState(jwt);
            await Message.Success("登录成功");
            Nav.NavigateTo("/",true);
        }
        else
        {
            await Message.Error("登录失败");
        }
    }

}

<style>
    .login-form {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: 0 0 10px #c8c8c8;
        margin-top: 30px; 
        margin-bottom: 30px;
        max-width: 100vw
    }

    @@media screen and (max-width: 768px) {
        .login-form{
            box-shadow: none;
            margin : 0;
        }
    }

    .input-box input {
        color: #1c1f23;
        width: 100%;
        padding: 10px;
        font-size: 16px;
        letter-spacing: 1px;
        margin-bottom: 30px;
        border: none;
        border-bottom: 1px solid #ededed;
        outline: none;
        background: transparent;
    }

    .input-box label {
        color: #1c1f23;
        padding: 10px;
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: .5s;
    }

    .input-box input:focus ~ label,
    .input-box input:valid ~ label {
        top: -18px;
        left: 0;
        color: #3c3c43;
        font-size: 12px;
    }
</style>